<template>
	<view class="container">
		<view class="status_bar">
			<view style="margin-left: 4%;" @tap="goBack()"><u-icon name="arrow-leftward" size='24' /></view>
			<view style="font-weight: bold; margin-left: -56upx;">我的群组</view>
			<view></view>
		</view>

		<view class="search-box">
			<!-- 修改事件为 @search -->
			<u-search placeholder="请输入您想搜索的内容" v-model="keyword" searchIconColor="#373737" placeholderColor="#afafaf"
				:showAction="true" actionText="搜索" @custom="handleSearch" @clear="handleClear" />
		</view>
		<view style="margin-top: 30upx;">
			<u-tabs :list="list1" @click="click" lineColor="#fff" :inactiveStyle="{
			color: '#b5b5b5',
			transform: 'scale(1)' }"></u-tabs>
		</view>
		<!--容器-->
		<scroll-view scroll-y class="list">
			<uni-swipe-action ref="swipe">
				<uni-swipe-action-item v-for="(item, index) in listarr" :key="index"
					style="border-bottom: #cbcbcb solid 1upx;">
					<view class="select-box" style="display: flex; padding: 12upx;" @tap="toDetail(item)">
						<!-- <view class="name-img" style="position: relative;">
							{{item.g_name[0]}}
							<image src="../../static/image/qun.png" class="qun"></image>
						</view> -->
						<view class="name-img" style="position: relative;border-radius: 10px;">
							<image class="" style="position: relative;width: 100%;height: 100%;border-radius: 10px;" v-if="item.image!=null"
								:src="item.image"></image>
							<image v-else :src="`http://chat.zwsmcn.com:8090/chatfile/avatar_group/${item.g_id}.jpg`"
								class="" style="position: relative;width: 100%;height: 100%;border-radius: 10px;">
								<image src="../../static/image/qun.png" class="qun"></image>
						</view>
						<view>
							<view style="margin-left: 20upx;position: relative; display: flex;margin-top: 5px;">
								<view style="color: #1467cd;">[群聊]</view>
								<view style="width: 132px;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis; ">
									<template v-if="item.remark == null">
										{{ item.g_name }}
									</template>
									<template v-else>
										{{ item.remark }}
									</template>
								</view>
							</view>
							<view v-if="item.g_notice_updatetime" class="title-box"
								style="height: 30px;font-size: 12px;">
								创建于:{{item.g_notice_updatetime}} </view>
							<view v-else class="title-box" style="height: 30px;font-size: 12px;">
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: uni.getStorageSync('userId'),
				listarr: [],
				startX: 0, // 触摸开始的X坐标
				endX: 0, // 触摸结束的X坐标
				threshold: 50, // 设置滑动多少距离后触发返回
				// 基本案列数据
				list1: [{
					name: '我加入的'
				}, {
					name: '我创建的'
				}, {
					name: '我管理的'
				}],
				keyword: '', // 搜索关键词
			};
		},
		onLoad() {
			// this.getGroupData('created-list');
		},
		onShow() {
			this.getGroupData('joined-list');
		},
		methods: {
			toDetail(item) {
				console.log(item);
				this.$api.globalData = item;
				uni.setStorageSync('globalData', this.$api.globalData)
				this.toPage('/pages/index/index');
				// ?typeu=43
				// this.toPage('/pages/index/index?groupId=' + JSON.stringify(item));
			},
			// 修改 handleSearch，处理 @search 事件
			handleSearch(e) {
				// e.detail 包含搜索框输入的内容
				console.log('搜索内容:', this.keyword); // 或者使用 e.detail
				this.getGroupData('joined-list'); // 根据关键词发起搜索请求
			},
			click(e) {
				// 根据点击的Tab来获取数据
				const tabIndex = e.index;
				const tabType = tabIndex === 1 ? 'created-list' :
					tabIndex === 2 ? 'managed-list' : 'joined-list';
				this.getGroupData(tabType);
			},
			handleClear() {
				console.log('清除搜索内容');
				this.keyword = ''; // 清空关键词
				this.getGroupData('created-list'); // 重新获取群组数据，可能需要调整根据清空后重新请求
			},
			// 获取群聊列表的通用函数
			getGroupData(type) {
				const urlMap = {
					'created-list': '/api/group/created-list',

					'joined-list': '/api/group/joined-list', // 'managed-list': '/api/group/managed-list',
					'managed-list': '/api/group/managed-list',
					// 'joined-list': '/api/circle/managed-list'
				};
				const apiUrl = urlMap[type];
				uni.request({
					url: this.$api.baseUrl + apiUrl,
					header: {
						'content-type': 'application/json'
					},
					data: {
						user_id: uni.getStorageSync('userId'),
						keyword: this.keyword
					},
					method: 'POST',
					success: res => {
						this.listarr = res.data.data;
						console.log(this.listarr);
						console.log("返回的群组数据");
					},
					fail: res => {
						console.error("请求失败", res);
					}
				});
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			touchStart(event) {
				this.startX = event.touches[0].clientX;
			},
			touchEnd(event) {
				this.endX = event.changedTouches[0].clientX;
				if (this.endX - this.startX > this.threshold) {
					// 右滑操作
					if (getCurrentPages().length > 1) {
						uni.navigateBack({
							delta: 1 // 返回上一页
						});
					}
				}
			},
			logout() {
				;
				// uni.clearStorageSync();
				uni.MBSocketProvider.closeLocalSocket();
				uni.setStorageSync('loginInfo', {});
				uni.setStorageSync('token', '')
				uni.setStorageSync('user_uid', '')
				uni.setStorageSync('userId', '')
				uni.setStorageSync('user_level', '')
				uni.setStorageSync('nickname', '')
				uni.setStorageSync('user_avatar_file_name', '')
				uni.setStorageSync('loginInfoArr', []);
				this.toPage('/pages/login');
			},
		}
	};
</script>

<style lang="scss" scoped>
	.qun {
		width: 14px;
		height: 14px;
		border-radius: 10px;
		position: absolute;
		bottom: 4px;
		right: 3px;
	}

	.name-img {
		width: 120upx;
		height: 120upx;
		border-radius: 10upx;
		background: #d54827;
		font-size: 36upx;
		text-align: center;
		line-height: 120upx;
		color: #fff;
		margin-left: 10upx;
	}

	.container {
		width: 100%;
		height: 100%;
	}

	.title-box {
		margin-left: 20upx;
		font-size: 30upx;
		color: #b0b0b0;
		margin-top: 12upx;
	}

	.status_bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 74upx;
	}

	.status_bar,
	.head {
		background-color: #fff;
		height: 120upx;

		.face {
			width: 160upx;
			height: 160upx;
			border-radius: 10upx;
		}

		.info-name {
			font-size: 40upx;
			font-weight: bold;
		}

		.info-num {
			// width: 56upx;
			padding: 2upx 30upx;
			background: #f0f4f7;
			border-radius: 30upx;
			margin-top: 21upx;
		}

		.copybtns {
			color: #4457a4;
			margin-top: 21upx;
		}
	}

	::v-deep.u-tabs__wrapper__nav {
		justify-content: space-around;
		border-bottom: #cbcbcb solid 2upx;
	}


	.shop-box {
		width: 92%;
		height: 36%;
		margin-left: 4%;
		background-color: #f8f9fb;
		margin-top: 20upx;
		border-radius: 20upx;
		padding: 10upx 30upx;
		color: #2e2e2e;
		font-weight: 300;

		image {
			width: 70upx;
			height: 70upx;
			padding: 10upx 28upx 0upx 10upx;

		}
	}

	.search-box {
		width: 92%;
		margin-left: 4%;
		margin-top: 16upx;
	}

	// .icon-title {
	// 	color: #d54827;
	// 	font-weight: bold;
	// 	margin-right: 20upx;
	// 	margin-left: 36upx;
	// }
</style>